<template>
    <IFlexHeaderMain>
      <template #header>
        <div>
          <ISearch :searchOptions="searchOptions"></ISearch>
          <ISeniorSearch :seniorSearchOption="seniorSearchOption">
            <template #aaa_template>
111111111111
            </template>
          </ISeniorSearch>
          <button @click="onClick">点击</button>
          <ICard>
             <template #header>adsfasdfasfdadsfasdfasfdadsfasdfasfdadsfasdfasfdadsfasdfasfdadsfasdfasfdadsfasdfasfdadsfasdfasfdadsfasdfasfdadsfasdfasfdadsfasdfasfdadsfasdfasfdadsfasdfasfd</template>
            <div>adsfasdfasfdadsfasdfasfdadsfasdfasfdadsfasdfasfdadsfasdfasfdadsfasdfasfdadsfasdfasfdadsfasdfasfdadsfasdfasfdadsfasdfasfdadsfasdfasfdadsfasdfasfdadsfasdfasfd</div>
             <template #footer>adsfasdfasfdadsfasdfasfdadsfasdfasfdadsfasdfasfdadsfasdfasfdadsfasdfasfdadsfasdfasfdadsfasdfasfdadsfasdfasfdadsfasdfasfdadsfasdfasfdadsfasdfasfdadsfasdfasfdadsfasdfasfd</template>
          </ICard>
          <IUpload :fileUploadOptions="fileUploadOptions"></IUpload>
        </div>
      </template>
      <IVxeTable :tableData="tableData" ref="ivxetableRef" @vxeTableSearchFun="searchFun">
        <template #address_template="{ obj }">我是谁我是谁我是谁我是谁我是谁我是谁我是谁我是谁我是谁我是谁我是谁我是谁我是谁我是谁我是谁我是谁我是谁我是谁我是谁我是谁我是谁我是谁我是谁我是谁我是谁我是谁我是谁我是谁 {{ obj.address }}</template>
        <template #expand_tempalte="{ obj }">阿斯蒂芬撒地方{{ obj }}</template>
      </IVxeTable>
      <template #footer>底部 {{ searchName }}</template>
    </IFlexHeaderMain>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { IFlexHeaderMain, IVxeTable, ISearch, ISeniorSearch,IUpload } from '../packages/index';
import { TableDataInterFace } from '../packages/components/IVxeTable/src/IVxeTable';
import { SearchInterFace } from '../packages/components/ISearch/src/ISearch';
import { SeniorSearchInterFace } from '../packages/components/ISeniorSearch/src/ISeniorSearch';
import { options } from 'less';
const fileUploadOptions=ref({
  size: 5,
	fileList: [],
	options: { multiple: false, accept: '.mp4,.mov,.webm',drag:true,listType:"text" },
   fileTypes: ['mp4', 'mov', 'webm'],
	multipleLength: 1,
	uploadFileUrl: '/admin/api/file/upload',
	autoUpload: false,
})
const basicForm = ref({
  col: 4,
  labelWidth: 70, // 文本宽度
  form: {
    moreSearch: '',
    clueSourceList: [],
    labelIds: []
  },
  fieldDataList: [
    {
      type: 'input', // form表单类型
      label: '搜索', // 字段描述信息
      placeholder: '姓名/手机号/微信/QQ/学员ID',
      field: 'moreSearch' // form 对应字段
    },
    {
      type: 'select', // form表单类型
      label: '标签', // 字段描述信息
      options: { mode: 'multiple', maxTagCount: 1 },
      field: 'labelIds', // form 对应字段
      dataList: []
    },
    {
      type: 'template', // form表单类型
      label: '标签', // 字段描述信息
      field: 'labelIds1', // form 对应字段
      template:'aaa_template'
    }
  ]
});
const seniorForm = ref({
  labelWidth: 80, // 文本宽度
  col: 12,
  form: {
    connectionStatus: null,
    examYear: [],
    onlineSourceNew: [],
    studentLevel: null, // 线索等级
    intentionLevel: null, // 意向程度
    sex: null, // 性别
    sourceChannel: null, // 渠道来源
    lockFlag: null, // 锁定
    processStage: null, // 跟进阶段
    connectionCount: '', // 跟进次数
    lastFollowTime: [], // 最后跟进时间   // lastStartTime  lastEndTime
    nextTime: [], // 下次联系时间   //nextStartTime   nextEndTime
    groupId: null, // 线索分组
    allocTime: [], // 分配时间    //allocStartTime allocEndTime
    allocUserId: null, // 分配人
    studentType: null, // 线索类型
    enterYear: null, // 入学年份
    nowSchoolId: null, // 就读院校
    nowCollageId: null, // 就读院系
    nowMajorId: null, // 就读专业
    nowClassId: null, // 班级
    workStatus: null, // 就业状态
    provinceCity: null, // 所在地
    agentId: null, // 代理人
    createType: null, // 录入方式
    createUserId: null,
    overdue: '',
    createTime: [], // 录入时间 //createStudentStart  createStudentEnd
    intentionLevelList: [], // 意向程度
    allocUserIdList: [],
    examYearList: [],
    phoneBelongList: [],
    headSearch: null as any,
    headTime: [] as string[]
  },
  fieldDataList: [
    {
      width: 8,
      type: 'datePicker', // form表单类型
      label: '考试年份', // 字段描述信息
      field: 'examYearList', // form 对应字段
      dataList: [{label:'2021',value:2021}],
    },
    {
      width: 8,
      type: 'select', // form表单类型
      label: '意向程度', // 字段描述信息
      field: 'intentionLevelList', // form 对应字段
      dataList: [],
      options: { mode: 'multiple', maxTagCount: 1 }
    },
    {
      labelCol: { style: { width: '100px' } },
      width: 8,
      type: 'cascader', // form表单类型
      label: '手机号归属地', // 字段描述信息
      options: { fieldNames: { label: 'name', value: 'name' } },
      field: 'phoneProvince' // form 对应字段
    },
    {
      width: 8,
      type: 'select', // form表单类型
      label: '线索等级', // 字段描述信息
      field: 'studentLevel', // form 对应字段
      dataList: []
    },
    {
      width: 8,
      type: 'select', // form表单类型
      label: '入学年份', // 字段描述信息
      field: 'enterYear', // form 对应字段
      dataList: []
    },
    {
      width: 8,
      type: 'select', // form表单类型
      label: '性别', // 字段描述信息
      field: 'sex', // form 对应字段
      dataList: [
        {label:'男','value':'1'},
        {label:'女','value':'2'}
      ]
    },
    {
        width: 8,
        type: 'select', // form表单类型
        label: '来源渠道', // 字段描述信息
        field: 'sourceChannel', // form 对应字段
        dataList: []
    },
    {
      width: 8,
      type: 'select', // form表单类型
      label: '是否锁定', // 字段描述信息
      field: 'lockFlag', // form 对应字段
      dataList: []
    },
    {
      width: 8,
      type: 'select', // form表单类型
      label: '跟进阶段', // 字段描述信息
      field: 'processStage', // form 对应字段
      dataList: []
    },
    {
      width: 8,
      type: 'input', // form表单类型
      label: '跟进次数', // 字段描述信息
      field: 'connectionCount', // form 对应字段
      dataList: []
    },
    {
      width: 8,
      type: 'select', // form表单类型
      label: '跟进状态', // 字段描述信息
      field: 'connectionStatus', // form 对应字段
      dataList: []
    },
    // {
    //     width: 8,
    //     type: 'select', // form表单类型
    //     label: '线索分组 ', // 字段描述信息
    //     field: 'groupId', // form 对应字段
    //     dataList: []
    // },
    {
      width: 8,
      type: 'select', // form表单类型
      label: '线索类型', // 字段描述信息
      field: 'studentType', // form 对应字段
      dataList: []
    },
    {
      width: 8,
      type: 'select', // form表单类型
      label: '分配人', // 字段描述信息
      field: 'allocUserIdList', // form 对应字段
      dataList: [],
      options: { mode: 'multiple', maxTagCount: 1 }
    },
    {
      width: 8,
      type: 'select', // form表单类型
      label: '代理人', // 字段描述信息
      field: 'agentId', // form 对应字段
      dataList: []
    },
    {
      width: 8,
      type: 'select', // form表单类型
      label: '就业状态', // 字段描述信息
      field: 'workStatus', // form 对应字段
      dataList: []
    },
    {
      width: 8,
      type: 'cascader', // form表单类型
      label: '所在地', // 字段描述信息
      field: 'provinceCity', // form 对应字段
      options: { fieldNames: { label: 'name', value: 'name' } },
      dataList: []
    },
    {
      width: 8,
      type: 'select', // form表单类型
      label: '就读院校 ', // 字段描述信息
      field: 'nowSchoolId', // form 对应字段
      callback: async function (data: any) {}
    },
    {
      width: 8,
      type: 'select', // form表单类型
      label: '就读院系 ', // 字段描述信息
      field: 'nowCollageId', // form 对应字段
      callback: async function (data: any) {}
    },
    {
      width: 8,
      type: 'select', // form表单类型
      label: '就读专业 ', // 字段描述信息
      field: 'nowMajorId', // form 对应字段
      callback: async function (data: any) {}
    },
    {
      width: 8,
      type: 'select', // form表单类型
      label: '班级 ', // 字段描述信息
      field: 'nowClassId' // form 对应字段
    },
    {
      width: 8,
      labelCol: { style: { width: '100px' } },
      type: 'rangePicker', // form表单类型
      label: '最后跟进时间', // 字段描述信息
      field: 'lastFollowTime', // form 对应字段
      options: { showTime: false, valueFormat: 'YYYY-MM-DD' }
    },
    {
      width: 8,
      type: 'rangePicker', // form表单类型
      label: '分配时间 ', // 字段描述信息
      field: 'allocTime', // form 对应字段
      options: { showTime: false, valueFormat: 'YYYY-MM-DD' }
    },
    {
      width: 8,
      type: 'select', // form表单类型
      label: '录入方式', // 字段描述信息
      field: 'createType', // form 对应字段
      dataList: []
    },
    {
      width: 8,
      type: 'select', // form表单类型
      label: '录入人', // 字段描述信息
      field: 'createUserId', // form 对应字段
      dataList: []
    },
    {
      width: 8,
      type: 'rangePicker', // form表单类型
      label: '录入时间 ', // 字段描述信息
      field: 'createTime', // form 对应字段
      options: { showTime: false, valueFormat: 'YYYY-MM-DD' }
    },
    {
      width: 8,
      labelCol: { style: { width: '100px' } },
      type: 'rangePicker', // form表单类型
      label: '下次联系时间 ', // 字段描述信息
      field: 'nextTime', // form 对应字段
      options: { showTime: false, valueFormat: 'YYYY-MM-DD' }
    },
    {
      width: 8,
      labelCol: { style: { width: '100px' } },
      type: 'rangePicker', // form表单类型
      label: '时间', // 字段描述信息
      isShow: false,
      field: 'headTime', // form 对应字段
      options: { showTime: false, valueFormat: 'YYYY-MM-DD' }
    },
    {
      width: 8,
      type: 'select', // form表单类型
      label: '数据范围', // 字段描述信息
      field: 'headSearch', // form 对应字段
      isShow: false,
      dataList: [
        { label: '有效线索总数', value: 'effectiveCount' },
        { label: '释放线索总数', value: 'releaseCount' },
        { label: '无效线索总数', value: 'invalidCount' },
        { label: '待跟进线索', value: 'needFollowCount' },
        { label: '已跟进线索', value: 'followCount' },
        { label: '校园大使总数', value: 'agentCount' },
        { label: '即将释放线索', value: 'willRelease' },
        { label: '三天未跟进线索', value: 'threeNoProcess' },
        { label: '7天未跟进线索', value: 'severNoProcess' },
        { label: '14天未跟进线索', value: 'fourteenNoProcess' },
        { label: '1月未跟进线索', value: 'oneMonthNoProcess' },
        { label: '3月未跟进线索', value: 'threeMonthNoProcess' },
        { label: '新增录入线索', value: 'newAddCount' },
        { label: '新增分配线索', value: 'newAssignCount' },
        { label: '新增校园大使推荐线索', value: 'newAddStuCount' }
      ]
    }
  ]
});
const tableData = ref<TableDataInterFace>({
  type: '123',
  columns: [
    { field: 'name', title: 'Name', sortable: true, width: 300, isCheck: false, drop: true, searchFilter: { type: 'input', placeholder: '请输入123' }, fixed: 'left' },
    { field: 'sex', title: 'Sex', drop: true, width: 300, searchFilter: { type: 'input', placeholder: '请输入123' } },
    { field: 'id', title: 'id', drop: true, width: 300, searchFilter: { type: 'input', placeholder: '请输入123' } },
    { field: 'age', title: 'Age', drop: true, width: 300, searchFilter: { type: 'input', placeholder: '请输入123' } },
    { field: 'address', title: '地址', width: 300, template: 'address_template', drop: true, searchFilter: { type: 'input' } },
    { field: 'time', title: '时间', width: 300, template: 'time_template', drop: true, searchFilter: { type: 'datetime' } },
    { field: 'rangePicker', width: 300, title: 'rangePicker时间', template: 'time_template', drop: true, searchFilter: { type: 'datetime', placeholder: '请输入123' } },
    {
      field: 'addressselect',
      title: '地址select',
      drop: true,
      searchFilter: {
        type: 'select',
        dataList: [
          { label: 1, value: 1 },
          { label: 2, value: 2 },
          { label: 3, value: 3 }
        ]
      }
    },
    { field: 'address3', title: '地址3', drop: true, searchFilter: { type: 'input' } }
  ],
  authControl: {
    toolbarExportConfig:{},
    printFun: async (a, b) => console.log('我是打印', a, b),
    toolbarCustomeFun: async (a, b) => console.log('自定义字段选择', a, b),
    checkBoxFun: async (a, b) => console.log('复选框选择', a, b),
    radioFun: async (a, b) => console.log('单选框', a, b),
    fieldSortFun: async (a, b) => console.log('排序', a, b),
    isExpandFun: async (a, b) => console.log('展开方法', a, b),
    columnDropFun: async (a, b) => console.log('拖动方法', a, b)
  },
  rowspanList: ['age'],
  data: [],
  operation: {
    label: '操作',
    dataList: [
      {
        label: '详情',
        width: 70,
        options: { link: true },
        callback: async (a, b) => {
          console.log('点击操作', a, b);
        }
      },
      {
        label: '详情',
        width: 70,
        btnOptionCallback:(data)=>({disabled:data.id==10}),
  //       btnOptionCallback:(data)=>{
  //  console.log(data,"11111111111111111111111")
  //       },
        callback: async (a, b) => {
          console.log('点击操作', a, b);
        }
      }
    ]
  },
  titleOperation: [
    {
      label: '左侧按钮',
      width: 60,
      callback: async (a, b) => {
        console.log('左侧按钮', a, b);
      }
    },
    {
      label: '右侧按钮',
      width: 60,
      position: 'right',
      callback: async (a, b) => {
        console.log('右侧按钮', a, b);
      }
    }
  ],
  toolbarOptions:{zoom:true},
  callback: async (a, b) => {
    const list = Array.from({ length: 120 }).map((item, index) => ({
      id: index,
      name: `Test${index}`,
      role: `Test${index}`,
      sex: `Test${index}`,
      age: index + 10,
      address: `Test${index}`,
      disable: index == 3 || false
    }));
    return {
      resultList: list,
      checkList: list,
      total: list.length
    };
  },
  clickRowCallback: async (a, b) => {
    console.log(a, b);
  },
  options: {}
});
const searchOptions = ref<SearchInterFace<any>>({
  form: { orgId: '', certificateName: '' },
  labelWidth: 80,
  onSubmit(arg0) {
    console.log(arg0);
  },
  fieldDataList: [
    {
      type: 'select', // form表单类型
      label: '机构', // 字段描述信息
      field: 'orgId', // form 对应字段
      dataList: [
        { label: '机构1', value: 'jg1' },
        { label: '机构2', value: 'jg2' },
        { label: '机构3', value: 'jg3' },
        { label: '机构4', value: 'jg4' }
      ]
    },
    {
      type: 'input', // form表单类型
      label: '产品名称', // 字段描述信息
      field: 'certificateName' // form 对应字段
    }
  ]
});
const seniorSearchOption = ref<SeniorSearchInterFace<any, any>>({
  onSubmit: () => {},
  basicForm: basicForm.value,
  seniorForm: seniorForm.value
});

const ivxetableRef = ref();
const searchName = ref();
const onClick = () => {
  const list = ivxetableRef.value.getTableRefData().getTableData();
  console.log(list);
  ivxetableRef.value.exportExcel()
};
const searchFun = (a, b) => {
  console.log(a, b, '1111111111111111');
};
</script>
